<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>实现拖拽</title>
    <style type="text/css">
      #div1,
      #div2 {
        float: left;
        width: 100px;
        height: 35px;
        margin: 10px;
        padding: 10px;
        border: 1px solid #aaaaaa;
      }
    </style>
    <script>
      function allowDrop(ev) {
        console.log(ev);
        ev.preventDefault();
      }

      function drag(ev) {
        console.log(ev.target.id);
        ev.dataTransfer.setData("Text", ev.target.id);
        const obj = {
          name: "张三",
          age: 18,
        };
        ev.dataTransfer.setData("obj", JSON.stringify(obj));
      }

      function drop(ev) {
        console.log(ev);
        ev.preventDefault();
        var data = ev.dataTransfer.getData("Text");
        console.log(JSON.parse(ev.dataTransfer.getData("obj")).name);
        ev.target.appendChild(document.getElementById(data));
      }

      const a = { name: "张三" };
      const b = { name: "张三" };
      console.log(a===b);
      const c ={"2":1,"3":2,"1":1};
      const d ={"1":2,"2":1};
      console.log(c)
      console.log(JSON.stringify(c)===JSON.stringify(d));
      const e ={"a":1,"b":2};
      const f ={"b":2,"a":1};
      console.log(JSON.stringify(e)===JSON.stringify(f));
    </script>
  </head>
  <body>
    <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)">
      <img
        src="./static/photo1.jpg"
        draggable="true"
        ondragstart="drag(event)"
        id="drag1"
        width="88"
        height="31"
      />
    </div>
    <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  </body>
</html>
